<template>
    <div>
        <h1 class="text-center text-lg">Animate.css动画库练习页面</h1>
        <div class="flex flex-row">
            <div class="left_menu">
                <ul>
                    <li v-for="(item, name) in all_animNames" :key="name">
                        <p class="font-bold">{{ name }}</p>
                        <div class="flex flex-col items-start">
                            <button
                                class="my-1 px-px border border-2 border-gray-50 bg-gray-200"
                                v-for="aName in item"
                                :key="aName"
                                @click="onClick(aName)"
                            >
                                {{ aName }}
                            </button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bg-red-100 flex-grow flex justify-center items-center">
                <h3
                    class="text-blue-900 font-bold  text-xl sd:text-2xl md:text-4xl animate__animated"
                    :class="currentAnimName"
                >
                    Animate.css
                </h3>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
    name: "CompName",
    setup() {
        const currentAnimName = ref<string>("");
        const all_animNames = {
            "Attention seekers": [
                "bounce",
                "flash",
                "pulse",
                "rubberBand",
                "shakeX",
                "shakeY",
                "headShake",
                "swing",
                "tada",
                "wobble",
                "jello",
                "heartBeat",
            ],
            "Back entrances": [
                "backInDown",
                "backInLeft",
                "backInRight",
                "backInUp",
            ],
            "Back exits": [
                "backOutDown",
                "backOutLeft",
                "backOutRight",
                "backOutUp",
            ],
            "Bouncing entrances": [
                "bounceIn",
                "bounceInDown",
                "bounceInLeft",
                "bounceInRight",
                "bounceInUp",
            ],
            "Bouncing exits": [
                "bounceOut",
                "bounceOutDown",
                "bounceOutLeft",
                "bounceOutRight",
                "bounceOutUp",
            ],
            "Fading entrances": [
                "fadeIn",
                "fadeInDown",
                "fadeInDownBig",
                "fadeInLeft",
                "fadeInLeftBig",
                "fadeInRight",
                "fadeInRightBig",
                "fadeInUp",
                "fadeInUpBig",
                "fadeInTopLeft",
                "fadeInTopRight",
                "fadeInBottomLeft",
                "fadeInBottomRight",
            ],
            "Fading exits": [
                "fadeOut",
                "fadeOutDown",
                "fadeOutDownBig",
                "fadeOutLeft",
                "fadeOutLeftBig",
                "fadeOutRight",
                "fadeOutRightBig",
                "fadeOutUp",
                "fadeOutUpBig",
                "fadeOutTopLeft",
                "fadeOutTopRight",
                "fadeOutBottomRight",
                "fadeOutBottomLeft",
            ],
            Flippers: ["flip", "flipInX", "flipInY", "flipOutX", "flipOutY"],
            Lightspeed: [
                "lightSpeedInRight",
                "lightSpeedInLeft",
                "lightSpeedOutRight",
                "lightSpeedOutLeft",
            ],
            "Rotating entrances": [
                "rotateIn",
                "rotateInDownLeft",
                "rotateInDownRight",
                "rotateInUpLeft",
                "rotateInUpRight",
            ],
            "Rotating exits": [
                "rotateOut",
                "rotateOutDownLeft",
                "rotateOutDownRight",
                "rotateOutUpLeft",
                "rotateOutUpRight",
            ],
            Specials: ["hinge", "jackInTheBox", "rollIn", "rollOut"],
            "Zooming entrances": [
                "zoomIn",
                "zoomInDown",
                "zoomInLeft",
                "zoomInRight",
                "zoomInUp",
            ],
            "Zooming exits": [
                "zoomOut",
                "zoomOutDown",
                "zoomOutLeft",
                "zoomOutRight",
                "zoomOutUp",
            ],
            "Sliding entrances": [
                "slideInDown",
                "slideInLeft",
                "slideInRight",
                "slideInUp",
            ],
            "Sliding exits": [
                "slideOutDown",
                "slideOutLeft",
                "slideOutRight",
                "slideOutUp",
            ],
        };

        const onClick = (animName: string) => {
            console.log("click: ", animName);
            currentAnimName.value = "animate__" + animName;
        };
        return {
            currentAnimName,
            all_animNames,
            onClick,
        };
    },
});
</script>

<style scoped>
@layer utilities {
    .left_menu {
        @apply bg-red-200 h-auto overflow-y-auto p-px
            text-xs sm:text-base
            flex flex-col items-start;
        height: 640px;
    }
}
</style>
